<template>
  <!-- 样本库列表页 -->
  <div class="sample-store">
    <h2>样本库</h2>
    <div class="container">
      <!-- 样本库目录 -->
      <div class="left_menu">
        <div class="expand">
          <span>样本库目录</span>

          <!-- DLJ 修改前 START  -->
          <!--
          <span class="btn" @click="expandAllFun">全部展开
              <i style="transform:rotate(90deg);font-size:12px" class="el-icon-d-arrow-right" />
          </span>
           -->
          <!-- DLJ 修改前 END  -->
          <!-- DLJ 修改 START  -->
          <span
            :class="['evidence-main-title-r', { 'is-active': expandAll12 }]"
            @click="onExpand('expandAll12', 'defaultPropsRef')"
          >
            {{ expandAll12 ? "全部收缩" : "全部展开" }}
            <i class="fa fa-angle-double-down" />
          </span>
          <!-- DLJ 修改 END  -->
        </div>
        <div class="menu_tree">
          <el-tree
            ref="defaultPropsRef"
            node-key="value"
            highlight-current
            :default-expand-all="true"
            :data="menuList"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <!-- 样本库内容 -->
      <div class="right_menu">
        <div class="basic_con">
          <div class="top_menu">
            <comTitle tit_txt="样本库基本信息" />
            <div class="operate">
              <el-button type="primary" @click="editSample('add')"
                ><i class="el-icon-plus" />新建样本库</el-button
              >
              <el-button @click="editSample('edit')"
                ><i class="el-icon-edit-outline" />编辑</el-button
              >
              <el-button type="danger" @click="editSample('delete')"
                ><i class="el-icon-delete" />删除</el-button
              >
              <el-button @click="goSampleList"
                ><i class="el-icon-right" />进入样本库</el-button
              >
            </div>
          </div>
          <div class="main_con">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="样本库名称：">{{
                currenItem.yangbenkmc
              }}</el-descriptions-item>
              <el-descriptions-item label="样本数量：">{{
                currenItem.yangbensl
              }}</el-descriptions-item>
              <el-descriptions-item label="选择时间：">{{
                currenItem.jiankusj
              }}</el-descriptions-item>
              <el-descriptions-item label="标引页：">{{
                currenItem.biaoyinx
              }}</el-descriptions-item>
              <el-descriptions-item label="建库说明：" :span="2">{{
                currenItem.jiankusm
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <edit-table
          :indexList="indexList"
          :yangbenkid="currenItem.yangbenkid"
          @getList="getList"
        ></edit-table>
        <!-- <div class="tag_con">
          <div class="top_menu">
            <comTitle tit_txt="样本库标引项" />
            <div class="operate">
              <el-button type="primary" @click="operateFun('add')"
                ><i class="el-icon-plus" />添加标引页</el-button
              >
            </div>
          </div>
          <div class="main_con">
            <el-table
              v-loading="listLoading"
              :data="indexList"
              border
              :header-cell-style="tableHeader"
            >
              <el-table-column
                label="标引项名称"
                align="center"
                width="180"
                prop="biaoyinxmc"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.status">{{ scope.row.biaoyinxmc }}</span>
                  <el-input
                    v-else
                    v-model="scope.row.biaoyinxmc"
                    placeholder="请输入标引项名称"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="标引项类型"
                align="center"
                width="180"
                prop="biaoyinxlx"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.status">{{ scope.row.biaoyinxlx }}</span>
                  <el-select
                    v-else
                    v-model="scope.row.biaoyinxlx"
                    @change="changelx"
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="item in indexTypeList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="下拉框参数"
                align="center"
                width="160"
                prop="biaoyinz"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.status">{{ scope.row.biaoyinz }}</span>
                  <el-input
                    v-else-if="scope.row.biaoyinxlx=='select'"
                    v-model="row[index].biaoyinz"
                    placeholder="逗号隔开"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === 'edit' || scope.row.status === 'add'">
                    <el-button @click="operateFun('save', scope.row)"
                      ><i class="el-icon-document" />保存</el-button
                    >
                    <el-button @click="operateFun('cancle', scope.row)"
                      ><i class="el-icon-close" />取消</el-button
                    >
                  </span>
                  <span v-else>
                    <el-button @click="operateFun('edit', scope.row)"
                      ><i class="el-icon-edit-outline" />编辑</el-button
                    >
                    <el-button
                      style="color: #fff"
                      type="danger"
                      @click="operateFun('delete', scope.row)"
                      ><i class="el-icon-delete" />删除</el-button
                    >
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div> -->
      </div>
    </div>
    <editSample :edit-data="editData" :sample-type-list="sampleTypeList" />
  </div>
</template>

<script>
import { deepClone } from "./utils/index";
import MenuTree from "./components/menuTree";
import comTitle from "./components/comTitle";
import editSample from "./components/edit";
import EditTable from "./components/editTable.vue";

import {
  bankList,
  bankInfo,
  bankDel,
  indexList,
  indexAdd,
  indexEdit,
  indexDel,
} from "@/api/sampleBank";

export default {
  name: "SampleStore",
  components: {
    MenuTree,
    comTitle,
    editSample,
    EditTable,
  },
  data() {
    return {
      expandAll: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      menuList: [],
      tagObj: {
        id: "",
        type: "",
        name: "",
        params: "",
        status: "add",
      },
      indexList: [],
      indexTypeList: [
        {
          name: "text",
          value: "text",
        },
        {
          name: "date",
          value: "date",
        },
        {
          name: "select",
          value: "select",
        },
      ],
      sampleTypeList: [
        {
          name: "课题组样本库",
          value: "ktz",
        },
        {
          name: "个人样本库",
          value: "gr",
        },
      ],
      listLoading: false,
      originData: "",
      editData: {
        dialogVisible: false,
      },
      currenItem: {
        yangbenkid: "", // 样本库ID
        yangbenkmc: "", // 样本库名称
        yangbensl: "", // 样本数量
        jiankusj: "", // 建库时间
        biaoyinx: "", // 标引项
        jiankusm: "", // 建库说明
        biaoyinList: [], // 标引列表
      },
      parentName: "", //父级名称
      /* DLJ APPEND 20210902 START */
      expandAll12: false, // [全部展开]和[全部收起]FLAG
      defaultPropsRef: "",
      /* DLJ APPEND 20210902 END */
    };
  },
  computed: {
    tableHeader() {
      return () => {
        return { "background-color": "#f5f5f5" };
      };
    },
  },
  created() {
    this.getBankList();
  },
  methods: {
    getList(id) {
      this.getBankInfo(id);
    },
    getBankList() {
      bankList().then((res) => {
        console.log(res.data, "---------banlist");
        this.menuList = res.data;
        this.$nextTick(function () {
          this.$refs["defaultPropsRef"].setCurrentKey(
            this.menuList[0].children[0].value
          );
        });
        this.parentName = this.menuList[0].name;
        // this.menuList = JSON.parse(JSON.stringify(res.data).replace(/name/g, 'label').replace(/value/g, 'id'))
        this.getBankInfo(Number(this.menuList[0].children[0].value));
      });
    },

    /* DLJ UPDATE 20210902 START */
    onExpand(expandAll, tree) {
      // 节点展开
      this[expandAll] = !this[expandAll];
      const treeArr = tree.split(","); // 改变每个节点的状态
      console.log(treeArr);
      treeArr.forEach((item) => {
        this.changeTreeNodeStatus(expandAll, this.$refs[item].store.root);
      });
    }, // 改变节点的状态
    changeTreeNodeStatus(expandAll, node) {
      node.expanded = this[expandAll];
      for (let i = 0; i < node.childNodes.length; i++) {
        // 改变节点的自身expanded状态
        node.childNodes[i].expanded = this[expandAll];
        // 遍历子节点
        if (node.childNodes[i].childNodes.length > 0) {
          this.changeTreeNodeStatus(expandAll, node.childNodes[i]);
        }
      }
    },
    /* DLJ UPDATE 20210902 END */

    changelx(val) {
      console.log(val);
    },
    handleNodeClick(data, node, val) {
      if (node.level == 1) {
        console.log("点击了顶级目录！");
      } else {
        this.parentName = this.sampleTypeList.find((item) => {
          return item.name == node.parent.data.name;
        }).value;
        this.getBankInfo(Number(data.value));
        // this.getIndexList(data.value);
      }
    },
    getBankInfo(id) {
      const param = {
        yangbenkid: id,
      };
      bankInfo(param).then((res) => {
        this.currenItem = res.data;
        this.indexList = res.data.biaoyinList;
        this.indexList.forEach((item) => {
          this.$set(item, "disabled", false);
          this.$set(item, "edit", false);
        });
        console.log(this.currenItem, "--------getBankInfo-----");
      });
    },
    // getIndexList(id) {
    //   const param = {
    //     yangbenkid: id || 1, // 样本库id
    //   };
    // //   indexList(param).then((res) => {
    //     // this.indexTypeList = res.data
    // //   });
    // },
    expandAllFun() {
      this.expandAll = !this.expandAll;
      console.log(this.expandAll, "this.expandAll");
    },
    // 新增 ｜ 编辑 ｜ 删除
    editSample(type) {
      switch (type) {
        case "add": {
          this.editData.dialogVisible = true;
          this.editData.type = "add";
          break;
        }
        case "edit": {
          console.log("------edit");
          this.editData.dialogVisible = true;
          this.editData.type = "edit";
          this.currenItem.yangbenlx = this.parentName;
          this.editData.row = JSON.parse(JSON.stringify(this.currenItem));
          break;
        }
        case "delete":
          {
            this.$confirm("此操作不可恢复, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.delSampleBank({ yangbenkid: this.currenItem.yangbenkid });
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              })
              .catch(() => {
                // this.$message({
                //   type: "info",
                //   message: "已取消删除",
                // });
              });
          }
          break;
      }
    },
    // 删除样本库
    delSampleBank(param) {
      bankDel(param).then((res) => {
        // 重新获取样本库列表
        this.getBankList();
      });
    },

    operateFun(type, data) {
      console.log(type, "type============");
      // console.log(data,'data============')
      const { biaoyinxid, biaoyinxlx } = data ?? {};
      if (type === "add") {
        // 是页面跳转还是添加一行数据 ????   尚不清楚两个都加上
        this.indexList.push(this.tagObj);
      } else if (type === "edit") {
        this.originData = deepClone(data);
        // 将当前点击item置为编辑状态
        const editINdex = this.indexList.findIndex(
          (i) => i.biaoyinxid === biaoyinxid
        );
        const change = this.indexList[editINdex];
        console.log("@22", change);
        change.status = "edit";
        this.$set(this.indexList, editINdex, change);
      } else if (type === "delete") {
        // 删除当前项
        const param = {
          biaoyinxid: biaoyinxid,
        };
        indexDel(param).then((res) => {
          console.log(res, "------delete index------");
          const deleleINdex = this.indexList.findIndex(
            (i) => i.biaoyinxid === biaoyinxid
          );
          this.indexList.splice(deleleINdex, 1);
        });
      } else if (type === "save") {
        // 调接口保存修改，成功后更新ui
        const { biaoyinxid, biaoyinxlx, biaoyinxmc, biaoyinz } = data;
        if (!biaoyinxmc) {
          return this.$message.warning("标引项名称必填");
        }
        if (!biaoyinxlx) {
          return this.$message.warning("标引项类型必填");
        }
        if (biaoyinxid) {
          // 编辑 --> 保存
          const params = {
            yangbenkid: this.currenItem.yangbenkid,
            biaoyinxid,
            biaoyinxlx,
            biaoyinxmc,
            biaoyinz,
          };
          indexEdit(params).then((res) => {
            console.log(res, "------edit index------");
            const editINdex = this.indexList.findIndex(
              (i) => i.biaoyinxid === biaoyinxid
            );
            const change = this.indexList[editINdex];
            console.log("@22", change);
            change.status = "";
            this.$set(this.indexList, editINdex, change);
          });
        } else {
          // 新建 ---> 保存
          const params = {
            yangbenkid: this.currenItem.yangbenkid,
            biaoyinxlx,
            biaoyinxmc,
            biaoyinz,
          };
          indexAdd(params).then((res) => {
            if (res.code === 200) {
              console.log(
                "111",
                this.indexList.find((i) => i.biaoyinxmc === biaoyinxmc)
              );
              this.indexList.find((i) => i.biaoyinxmc === biaoyinxmc).status =
                "";
            }
          });
        }
      } else if (type === "cancle") {
        // 恢复当前项的数据
        const deleleINdex = this.indexList.findIndex(
          (i) => i.biaoyinxid === biaoyinxid
        );
        this.indexList.splice(deleleINdex, 1, this.originData);
      }
    },
    goSampleList() {
      if (this.currenItem.yangbenkid) {
        this.$router.push({
          path: "/sample-list",
          query: {
            yangbenkid: this.currenItem.yangbenkid,
          },
        });
      }else{
        this.$message.warning("请选择样本库id");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sample-store {
  width: 1200px;
  margin: 0 auto;
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
  // margin: 0 150px;
  border-radius: 4px;
  .container {
    display: flex;
    .left_menu {
      width: 19%;
      border-radius: 5px;
      background-color: #3157b5;
      /deep/ .el-tree-node__content {
        height: 36px;
      }
      /deep/ .el-tree-node__label {
        font-size: 14px;
        color: #303133;
      }
      .expand {
        line-height: 45px;
        background-color: #3157b5;
        color: #fff;
        padding: 0 5px 0 15px;
        display: flex;
        font-size: 15px;
        border-right: 5px solid orange;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        span {
          justify-content: space-around;
          display: inline-block;
          width: 50%;
          // fon
        }
        .btn {
          text-align: right;
          font-size: 15px;
          i {
            margin-left: 5px;
          }
        }
      }
      .menu_tree {
        margin-left: 5px;
        height: 100%;
        background-color: #fff;
      }
    }
    .right_menu {
      width: 70%;
      margin-left: 25px;
      padding: 20px;
      border: 1px solid #80808070;
      border-radius: 5px;
      background-color: #fff;
      .basic_con,
      .tag_con {
        margin-bottom: 20px;
        .top_menu {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
        }
        .main_con {
          /deep/ .el-descriptions-item__label {
            width: 150px;
          }
          /deep/ .is-bordered-label {
            border-right-color: transparent;
          }
        }
      }
    }
  }
  // 重新icon
  [class*=" el-icon-"],
  [class^="el-icon-"] {
    font-weight: bold;
    font-size: 10px;
    margin-right: 8px;
  }
  .el-tree {
    /deep/ .is-current .el-tree-node__label {
      color: #2d54b8;
      color: #464444;
    }
  }
  .el-descriptions {
    /deep/ .el-descriptions-item__label.is-bordered-label {
      font-weight: normal;
      color: #303133b5;
      font-size: 14px;
    }
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li,
  .el-pagination__total {
    color: #303133;
  }

  .el-select-dropdown__item.selected {
    color: #2d54b8 !important;
  }

  .el-button {
    // height: 36px;
    // line-height: 36px;
    padding: 10px 18px;
    font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
    color: #303133;
    font-size: 14px;
    font-weight: 700;

    &:hover {
      color: #4f74c4;
      border-color: #4f74c4;
      background: white;
    }

    &:focus {
      color: #1c3991;
      border-color: #1c3991;
      background: white;
    }

    &--danger {
      color: white;
      background: #f55656;
      &:hover {
        color: #fff;
        background-color: #ff8683;
        border-color: #ff8683;
      }
      &:focus {
        color: #fff;
        background-color: #cf3e43;
        border-color: #cf3e43;
      }
    }

    &--primary {
      color: white;
      background-color: #2d54b8;
      border-color: #2d54b8;

      &:hover {
        background: #4f74c4;
        border-color: #4f74c4;
        color: white;
      }

      &:focus {
        background: #1c3991;
        border-color: #1c3991;
        color: white;
      }
    }
  }

  .el-table {
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
    // font-size: 16px !important;
    color: #303133b5;
    font-size: 14px;

    /deep/ .el-table__header tr th {
      background: #f1f1f1;
      color: #303133b5;
      // font-size: 14px;
    }
    /deep/ .el-table__body tr td {
      // background: #f1f1f1;
      // color: #30313394;
      // font-size: 14px;
      padding: 5px;
      .el-button {
        padding: 7px 14px;
        &:hover {
          color: #4f74c4;
          border-color: #4f74c4;
        }

        &:focus {
          color: #1c3991;
          border-color: #1c3991;
        }
      }
      .el-input {
        .el-input__inner {
          color: #303133;
          font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
          background-color: #aaadb129;
        }
      }
    }
  }

  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: #2d54b8;
  }
}
</style>
<style lang="scss" scoped>
.legal-pane {
  .evidence-main-title-r {
    float: right;
    color: #2d54b8;
    i {
      margin-left: 8px;
    }
    &:hover {
      cursor: pointer;
      color: #409eff;
    }
    &.is-active {
      i {
        transform: rotate(180deg);
      }
    }
  }
  .normal {
    font-style: normal;
  }

  & > div:first-child {
    margin-top: 0;
  }

  &__title {
    display: flex;
    font-size: 18px;
    color: #303133;
    font-weight: 700;
    margin: 20px 0;

    &::before {
      content: "";
      display: block;
      width: 5px;
      height: 18px;
      background: #2d54b8;
      margin-right: 5px;
    }
  }

  &__expression {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    color: #2d54b8;
    background: #ebeef5;
    margin-left: 10px;

    & > span:last-child {
      cursor: pointer;
    }
  }

  &__card {
    width: 570px;
    border-color: #dedfe6 !important;

    &--arrow {
      transform: rotate(90deg);
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 110px;
      background-color: #dcdfe6;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px #fff;
      border-radius: 10px;
      background-color: #fff;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px #dcdfe6;
      background-color: #dcdfe6;
    }
  }

  &__footer {
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
.legal-pane {
  .el-form {
    .el-form-item {
      margin-bottom: 10px;

      &__label,
      &__content {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 400;
      }
    }
  }

  .el-checkbox {
    &__label {
      font-size: 16px;
    }
  }

  .el-card__header {
    border-color: #dedfe6 !important;
  }

  .el-input__inner {
    background: #fafafa;
    width: 400px;
  }

  .el-range-input {
    background-color: #fafafa;
  }

  &__form {
    .el-form-item {
      margin-bottom: 20px !important;

      &__label {
        line-height: 40px !important;
      }
    }
  }

  ::placeholder {
    color: #c0c4cc !important;
  }
}
</style>
<style lang="scss">
$main-color: #303133;
$blue-color: #2d54b8;
$border-color: #dcdfe6;
.evidence-content {
  .el-tabs--border-card {
    border: 0;
    border-radius: 6px;
    box-shadow: none;
  }
  .el-tabs__item {
    padding: 0 14px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: 1px solid $border-color;
    margin-top: 0;
    color: $blue-color;
    border-radius: 6px 6px 0 0;
    margin-right: 10px;
    border-bottom: 0;
    background-color: #ebeef5;
    font-size: 16px;
  }
  .el-tabs--border-card > .el-tabs__header {
    background-color: #f7f7f7;
    margin-top: -1px;
    border-bottom: 1px solid $border-color;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: $main-color;
    background-color: #fff;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
    margin-left: 0;
  }
  .el-tabs--border-card > .el-tabs__content {
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    padding: 20px;
  }
}
.evidence-content {
  .evidence-form {
    margin-top: 20px;
  }
  .el-input__inner {
    height: 36px;
    line-height: 36px;
    border: 1px solid $border-color;
    background-color: #fafafa;
    font-size: 16px;
  }
  .el-date-editor .el-range-input,
  .el-date-editor .el-range-separator {
    background-color: #fafafa;
    font-size: 16px;
  }
  .el-date-editor .el-range-input {
    width: 43%;
  }
}
.evidence-submit-btn {
  .el-form-item__content {
    font-size: 16px;
    text-align: center;
    margin: 0 auto !important;
  }
  .el-button {
    padding: 10px 12px;
    color: $main-color;
    i {
      margin-right: 10px;
    }
  }
  .el-button--primary {
    padding-left: 80px;
    padding-right: 80px;
    color: #ffffff;
  }
}
.evidence-content {
  margin-top: 20px;
  .el-form-item {
    min-height: 40px;
    margin-bottom: 18px;
  }
  .el-form-item__label,
  .el-input__inner {
    font-size: 14px;
    color: $main-color;
    font-weight: normal;
  }
  .el-range-editor.el-input__inner {
    width: 100%;
  }
}
.evidence-main-form-item-con {
  .el-checkbox {
    float: left;
  }
  .legal-pane__card {
    width: 570px;
    border-color: #dedfe6 !important;

    &--arrow {
      transform: rotate(90deg);
    }
  }
}
.evidence-main-form-item-conner {
  .el-tree-node__label,
  .el-radio__label {
    font-size: 14px;
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 110px;
    background-color: #dcdfe6;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
    border-radius: 10px;
    background-color: #fff;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #dcdfe6;
    background-color: #dcdfe6;
  }
}
.evidence-main-item {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $blue-color;
    border-color: $blue-color;
  }

  .el-card {
    border: 0;
    border-top: 1px solid #e3e6ed;
    border-bottom: 1px solid #e3e6ed;
    padding: 6px 0;
  }
  .evidence-main-form-item-content .el-card {
    border: 0;
  }
  .el-card__body {
    padding: 0;
  }
  .el-tree-node__content {
    height: 32px !important;
    line-height: 32px;
  }
}
</style>
<style lang="scss" scoped>
$main-color: #303133;
$blue-color: #2d54b8;
$border-color: #dcdfe6;
.evidence-wrapper,
button,
input,
optgroup,
select,
textarea {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
}
.evidence-wrapper {
  margin: 0 auto;
  width: 1200px;
  overflow: hidden;
  color: $main-color;
  font-size: 14px;
}
.evidence-title {
  margin-top: 20px;
  overflow: hidden;
  .evidence-title-l {
    font-size: 22px;
    float: left;
  }
}
.evidence-filter-title {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  height: 16px;
  line-height: 16px;
  padding-left: 14px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 4px;
    height: 100%;
    background-color: $blue-color;
  }
}
.evidence-filter {
  .evidence-filter-params {
    margin: 20px 0 0 14px;
    overflow: hidden;
    .evidence-filter-params-label {
      float: left;
      margin-right: 14px;
      height: 36px;
      line-height: 36px;
      color: #606266;
      font-size: 14px;
    }
  }
  .evidence-filter-params-t {
    .el-autocomplete {
      float: left;
      margin-right: 20px;
      width: 60%;
    }
    .el-button {
      float: left;
      margin: 0 20px 0 0;
      padding: 10px 20px;
      font-size: 14px;
    }

    i {
      margin-right: 10px;
    }
  }

  .evidence-filter-tips {
    margin: 20px 0 0 14px;
    background-color: #ebeef5;
    color: $blue-color;
    max-height: 200px;
    overflow: auto;
    line-height: 1.5;
    padding: 10px 20px;
    font-size: 14px;
    .evidence-filter-tips-text {
      float: left;
    }
    .evidence-filter-tips-edit {
      float: right;
      color: $blue-color;
      cursor: pointer;
      i {
        margin-right: 10px;
        font-size: 14px;
      }
      &:hover,
      &:focus {
        color: #5176c1;
      }
    }
  }
}
.evidence-content {
  position: relative;
  .evidence-more-btn {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    color: $blue-color;
    font-size: 14px;
    i {
      margin-left: 10px;
      transform: rotate(-90deg);
      font-size: 12px;
      font-weight: 700;
    }
  }
}
.evidence-body {
  margin: 0 0 10px 0;
  .evidence-submit-btn {
    margin-bottom: -10px;
  }
  .evidence-item {
    margin-bottom: 20px;
  }
}
// 中间内容
.evidence-main {
  margin: 20px auto;
}
.evidence-main-item {
  border: 1px solid #dbdee5;
  overflow: hidden;
  .evidence-main-title {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #dbdee5;
    .evidence-main-title-l {
      float: left;
    }
    .evidence-main-title-r {
      float: right;
      color: $blue-color;
      i {
        margin-left: 8px;
      }
      &:hover {
        cursor: pointer;
        color: #409eff;
      }
      &.is-active {
        i {
          transform: rotate(180deg);
        }
      }
    }
  }
  .evidence-main-form {
    margin: 10px 20px;
  }
  .evidence-main-form-item {
    line-height: 34px;
    overflow: hidden;
    .evidence-main-form-item-label {
      float: left;
    }
    .evidence-nofloat {
      float: none;
    }
    .evidence-main-form-item-con {
      color: #616266;
      float: left;
      margin-left: 12px;
    }
  }
}
.el-card__body {
  .el-tree {
    .el-checkbox__input {
      display: none !important;
    }
  }
}
</style>
